<template>
  <div class="content-wraper">
    <div class="common-page">
      <div class="content-left">
        <tree-box
          v-model="selectedNode"
          no-search
          :data="treeData"
          :title="treeTitle"
        />
      </div>
      <div class="content-right">
        <div class="search-box">
          <el-input
            v-model="name"
            style="width: 300px;"
            placeholder="请输入单位名称"
            prefix-icon="el-icon-search"
          />
          <el-button style="margin-left: 1%;" type="primary" icon="el-icon-search" @click="search()">查询</el-button>
          <el-button type="warning" icon="el-icon-refresh" @click="reset()">重置</el-button>
        </div>
        <div class="detail">
          <!-- <manage-detail ref="modifyForm" :data="orgDetail" /> -->
          <com-table :data="dataList" :columns="columns" :total="total" @pageChange="pageChange">
            <template v-slot:name="{row}">
              <a class="com-link" @click="viewDetail(row)">{{ row.name }}</a>
            </template>
            <template v-slot:rating="{row}">
              <div v-if="row.rating == 1">A级</div>
              <div v-else-if="row.rating == 2">B级 </div>
              <div v-else-if="row.rating == 3">C级</div>
              <div v-else>D级</div>
            </template>
            <template v-slot:options="{row}">
              <el-button type="primary" icon="el-icon-edit" size="mini" @click="editBuildUnit(row)">编辑</el-button>
              <el-button type="danger" icon="el-icon-delete" size="mini" @click="delBuildUnit(row)">删除</el-button>
            </template>
          </com-table>
        </div>
      </div>
    </div>
    <add-supplier :opt-type="optType" :data="supplierDetail" :type-label="typeLabel" :show-modal.sync="showAddFileModal" />
  </div>
</template>

<script>
import {
  getSupplierFinishInfoList,
  getSupplierCategoryTree
} from '@/api/travellingTraderManage'
import addSupplier from '../../companyStore/components/addSupplier.vue'
export default {
  name: 'Document',
  components: {
    addSupplier
  },
  props: {
    treeTitle: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    },
    typeLabel: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      name: '',
      docTypes: ['文档', '原件', '复印件', '扫描件'],
      supplierDetail: {},
      treeData: [],
      selectedNode: null,
      showDirectory: false,
      showAddFileModal: false,
      dataList: [],
      fileList: [],
      optType: 'add',
      columns: [
        {
          label: '编号',
          prop: 'number'
        },
        {
          label: '单位名称',
          prop: 'name',
          slot: 'name'
        },
        {
          label: '联系人姓名',
          prop: 'contactName'
        },
        {
          label: '省份',
          prop: 'province'
        },
        {
          label: '城市',
          prop: 'city'
        },
        {
          label: '评定等级',
          prop: 'rating',
          slot: 'rating'
        },
        {
          fixed: 'right',
          label: '操作',
          width: '180',
          prop: 'options',
          slot: 'options'
        }
      ],
      total: 0,
      pageParams: {
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  watch: {
    selectedNode(newValue) {
      // this.getDetail(newValue)
      this.getDataList()
    }
  },
  mounted() {
    this.getSupplierCategoryTree()
  },
  methods: {
    search() {
      this.getDataList()
    },
    reset() {
      this.name = ''
    },
    pageChange(data) {
      this.pageParams = data
      this.getDataList()
    },
    getDataList() {
      const params = {
        ...this.pageParams,
        type: this.type,
        name: this.name,
        ...this.selectedNode ? {
          supplierCategoryId: this.selectedNode.id
        } : {}
      }
      getSupplierFinishInfoList(params).then(res => {
        const { data, total } = res.data || {}
        if (data) {
          this.dataList = data
          this.total = total - 0
        }
      })
    },
    getSupplierCategoryTree() {
      getSupplierCategoryTree({ supplierCategoryType: this.type }).then(res => {
        const { nodes } = res.data || {}
        this.treeData = nodes || []
      })
    },
    viewDetail(data) {
      this.optType = 'detail'
      this.supplierDetail = data
      this.showAddFileModal = true
    }
  }
}
</script>

<style lang="scss" scoped>
.com-link{
  color: #599cf8;
  &:hover {
    text-decoration:underline;
  }
}
.common-page{
  height:100%;
  display: flex;
  .content-left,.content-right{
    height: 100%;
  }
  .content-left{
    padding-right: 10px;
    border-right: 1px solid #dedede;
    width: 300px;
  }
  .content-right{
    padding-left: 10px;
    flex: 1;
    .search-box{
      height: 50px;
    }
    .detail{
      height: calc(100% - 50px);
      // margin-top: 10px;
      overflow: auto;
    }
  }
  .tree{
    height: 100%;
    // padding-top: 10px;
  }
}
</style>
